<!DOCTYPE html>
<html ng-app="app" ng-controller="MyController as ctrl">
<head>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.0/ui-bootstrap-tpls.js"></script>
    <script src="../dist/datetime-picker.js"></script>
    <script src="index.js"></script>
</head>
<body style="padding:10px;" class="container-fluid">
<h1>DateTime Picker Demo</h1>
<p>Use datetime calendar to choose a date and/or time from a popup calendar.  This can be used as a replacement for the bootstrap-ui datepicker-popup control</p>
<hr />
<div>
    <h3>Pick a date</h3>
    <ul>
        <li>dateDisabled used, todays date is disabled when the picker is displaying days</li>
        <li>closeOnDateSelection="false"</li>
        <li>datepickerOptions - showWeeks=false, startingDay=1</li>
    </ul>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Date</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="mediumDate" ng-model="ctrl.picker1.date" is-open="ctrl.picker1.open" enable-time="false" datepicker-options="ctrl.picker1.datepickerOptions" close-on-date-selection="false" datepicker-append-to-body="true" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker1')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">model</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.picker1.date }}</p>
            </div>
        </div>
    </form>
    <hr />
    <h3>Pick a time</h3>
    <ul>
        <li>timepickerOptions - showMeridian=false, readonlyInput=true</li>
    </ul>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Time</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="HH:mm" ng-model="ctrl.picker2.date" is-open="ctrl.picker2.open" enable-date="false" timepicker-options="ctrl.picker2.timepickerOptions" close-on-selection="true" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker2')"><i class="fa fa-clock-o"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">model</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.picker2.date }}</p>
            </div>
        </div>
    </form>
    <hr />
    <h3>Pick a date and time</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Both</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm" ng-model="ctrl.picker3.date" is-open="ctrl.picker3.open" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker3')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">model</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.picker3.date }}</p>
            </div>
        </div>
    </form>
    <hr />
    <h3>Pick two dates to calculate difference</h3>
    <p>Pick a date range, using two dates. Use minDate and maxDate to make sure your end date cannot be before your start date and vice-versa</p>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">From</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd MMM yyyy" ng-model="ctrl.picker4.date" is-open="ctrl.picker4.open" enable-time="false" datepicker-options="ctrl.picker4.datepickerOptions" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker4')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">To</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd MMM yyyy" ng-model="ctrl.picker5.date" is-open="ctrl.picker5.open" enable-time="false" datepicker-options="ctrl.picker5.datepickerOptions" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker5')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Difference</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.dayRange }} (days)</p>
            </div>
        </div>
    </form>
    <h3>Global Configured DateTime Picker</h3>
    <p>Date picker only passes in the model and isOpen parameters, the rest are determined by the constant uiDatetimePickerConfig</p>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Both</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker ng-model="ctrl.picker6.date" is-open="ctrl.picker6.open" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker6')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">model</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.picker6.date }}</p>
            </div>
        </div>
    </form>
    <h3>Use bootstrap dropup class</h3>
    <p>Use dropup to make the dropdown menu go upwards instead of down. NOTE: Cannot currently use append-to-body="true" with dropup class</p>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Date</label>
            <div class="col-sm-10">
                <p class="input-group dropup">
                    <input type="text" class="form-control" datetime-picker="mediumDate" ng-model="ctrl.picker7.date" is-open="ctrl.picker7.open" enable-time="false" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker7')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">model</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.picker7.date }}</p>
            </div>
        </div>
    </form>
    <hr />
    <h3>View Mode</h3>
    <p>Use a particular view mode only for the datepicker.</p>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Date</label>
            <div class="col-sm-10">
                <p class="input-group dropup">
                    <input type="text" class="form-control" datepicker-mode="'year'" datetime-picker="yyyy" ng-model="ctrl.picker8.date" is-open="ctrl.picker8.open" enable-time="false" datepicker-options="ctrl.picker8.datepickerOptions" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker8')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">model</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.picker8.date }}</p>
            </div>
        </div>
    </form>
    <hr />
    <h3>Default Time</h3>
    <p>Set a default time when choosing a date</p>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Both</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker ng-model="ctrl.picker9.date" default-time="17:00" is-open="ctrl.picker9.open" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker9')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">model</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.picker9.date }}</p>
            </div>
        </div>
    </form>
    <h3>Min / Max times</h3>
    <p>Pick a minimum time in 1 picker and a maximum time in another picker.  The opposite picker will disable so you cannot overlay the ranges</p>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Min</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="HH:mm" ng-model="ctrl.picker10.date" is-open="ctrl.picker10.open" timepicker-options="ctrl.picker10.timepickerOptions" enable-date="false" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker10')"><i class="fa fa-clock-o"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Max</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="HH:mm" ng-model="ctrl.picker11.date" is-open="ctrl.picker11.open" timepicker-options="ctrl.picker11.timepickerOptions" enable-date="false" />
              <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker11')"><i class="fa fa-clock-o"></i></button>
              </span>
                </p>
            </div>
        </div>
    </form>
    <hr />
    <h3>Customize Button bar</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Date</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="mediumDate" ng-model="ctrl.picker12.date" is-open="ctrl.picker12.open" enable-time="false" button-bar="ctrl.picker12.buttonBar" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker12')"><i class="fa fa-calendar"></i></button>
                </span>
                </p>
            </div>
        </div>
    </form>
    <hr />
    <h3>Call function when closed</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Date</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="ctrl.picker13.date" is-open="ctrl.picker13.open" when-closed="ctrl.picker13.closed(args)" />
                <span class="input-group-btn">
                 <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker13')"><i class="fa fa-calendar"></i></button>
                </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">On Close</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.closedArgs }}</p>
            </div>
        </div>
    </form>
    <hr />
    <h3>Save As ISO</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">ISO</label>
            <div class="col-sm-10">
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="ctrl.picker14.date" is-open="ctrl.picker14.open" save-as="ISO" />
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker14')"><i class="fa fa-calendar"></i></button>
              </span>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">On Close</label>
            <div class="col-sm-10">
                <p class="form-control-static">{{ ctrl.picker14.date }}</p>
            </div>
        </div>
    </form>
    <hr />
</div>
</body>

</html>